<template>
  <el-card class="sellBox">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="销售额" name="sell">
        <el-row>
          <el-col :span="18">
            <!-- 左边柱状图 -->
            <SaleBarCharts :activeName="activeName"></SaleBarCharts
          ></el-col>
          <el-col :span="6">
            <!-- 后边排行榜 -->
            <div class="rank">
              <h3>门店销售额排名</h3>
              <ul>
                <li v-for="order in orderRank" :key="order.no">
                  <div class="left">
                    <span :class="{ front: order.no <= 3 }">{{ order.no }}</span
                    >{{ order.name }}
                  </div>
                  <div class="right">{{ order.money }}</div>
                </li>
              </ul>
            </div></el-col
          >
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="访问量" name="pageView">
        <el-row>
          <el-col :span="18">
            <!-- 左边柱状图 -->
            <SaleBarCharts :activeName="activeName"></SaleBarCharts
          ></el-col>
          <el-col :span="6">
            <!-- 后边排行榜 -->
            <div class="rank">
              <h3>门店访问量排名</h3>
              <ul>
                <li v-for="user in userRank" :key="user.no">
                  <div class="left">
                    <span :class="{ front: user.no <= 3 }">{{ user.no }}</span
                    >{{ user.name }}
                  </div>
                  <div class="right">{{ user.money }}</div>
                </li>
              </ul>
            </div></el-col
          >
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <div class="date">
      <span class="fast" @click="getDay">今日</span>
      <span class="fast" @click="getWeek">本周</span>
      <span class="fast" @click="getMonth">本月</span>
      <span class="fast" @click="getYear">本年</span>
      <el-date-picker
        v-model="dateValue"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
    </div>
  </el-card>
</template>

<script>
import { mapGetters } from "vuex";
// 引入柱状图组件
import SaleBarCharts from "./SaleBarCharts";
import dayjs from "dayjs";
export default {
  name: "Sell",
  data() {
    return {
      activeName: "sell",
      dateValue: [],
    };
  },
  computed: {
    ...mapGetters("home", ["orderRank", "userRank"]),
  },
  // 注册组件
  components: {
    SaleBarCharts,
  },
  methods: {
    // 获取本天
    getDay() {
      // 获取当前的一天
      const start = dayjs().startOf("day").format("YYYY-MM-DD");
      this.dateValue = [start, start];
    },
    // 获取本周
    getWeek() {
      const start = dayjs().startOf("week").format("YYYY-MM-DD");
      const end = dayjs().endOf("week").format("YYYY-MM-DD");
      this.dateValue = [start, end];
    },
    // 获取本月
    getMonth() {
      const start = dayjs().startOf("month").format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      this.dateValue = [start, end];
    },
    // 获取本年
    getYear() {
      const start = dayjs().startOf("year").format("YYYY-MM-DD");
      const end = dayjs().endOf("year").format("YYYY-MM-DD");
      this.dateValue = [start, end];
    },
    handleClick(tab) {
      // 当点击切换tabs时，重新调用initMyCharts函数
      tab.$children[0].$children[0].$children[0].initMyCharts();
    },
  },
};
</script>

<style>
.sellBox {
  position: relative;
}
.sellBox .date {
  position: absolute;
  top: 20px;
  right: 40px;
}
.sellBox .date .fast {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.sellBox .date .fast:hover {
  color: red;
}
/* 排名样式 */
.rank ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rank ul li {
  margin-top: 13px;
  display: flex;
  justify-content: space-between;
}
.rank ul li span {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  margin: 0 20px 0 10px;
}
.rank ul li .front {
  background-color: #000;
  color: #fff;
}
</style>